import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';

import '../../base/imageres.dart';
import '../../base/constant.dart';
import '../../base/eventbus.dart';
import '../../base/log.dart';
import '../../base/stringres.dart';
import '../../base/theme.dart';
import '../../views/jsw_base_view.dart';
import '../../views/wheelview/clickable_list_wheel_widget.dart';

///女性健康下面的生理周期
class PhysiologicalCyclePage extends StatefulWidget {
  final int cycleValue;

  const PhysiologicalCyclePage({super.key, required this.cycleValue});

  @override
  State<StatefulWidget> createState() {
    return _PhysiologicalCyclePageState();
  }
}

class _PhysiologicalCyclePageState extends State<PhysiologicalCyclePage> {
  static const _tag =
      '[page_physiological_cycle.dart][_PhysiologicalCyclePageState]';

  ///滑动控制器
  final _scrollController = FixedExtentScrollController();

  ///周期选择器数据
  final List<int> _items = List.generate(28, (index) => index + 18);

  ///滑动item高度
  static const double _itemHeight = 50;

  ///是否正常周期
  final ValueNotifier<bool> _isNormalCycle = ValueNotifier(true);

  ///生理周期的值
  var _cycleValue = 10;

  @override
  void initState() {
    super.initState();
    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: SystemUiOverlay.values);
    for (var i = 0; i < _items.length; i++) {
      if (_items[i] == widget.cycleValue) {
        _cycleValue = i;
        DartLog.i(_tag, "读取本地的生理周期：${_items[i]} 天");
        break;
      }
    }
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage(ImageRes.bg_health_set),
              fit: BoxFit.cover, // 图片填充方式
            ),
          ),
        ),
        JSWBaseView(
          bodyColor: Colors.transparent,
          head: AppBar(
            elevation: 0.0,
            backgroundColor: Colors.transparent,
            title: EasyTouch(
              width: double.infinity,
              padding: const EdgeInsets.only(right: 55),
              child: Text(
                StringRes.physiological_cycle_content,
                textAlign: TextAlign.center,
                style: ThemeUtil.toolbar,
              ),
            ),
            leading: IconButton(
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              hoverColor: Colors.transparent,
              icon: const Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
              onPressed: () {
                Get.back();
              },
            ),
          ),
          body: Column(
            children: [
              //内容
              Container(
                  margin: const EdgeInsets.only(top: 30, left: 20, right: 20),
                  child: Text(
                    textAlign: TextAlign.center,
                    StringRes.women_cycle_content,
                    style: ThemeUtil.h1.copyWith(fontSize: 20),
                  )),

              //提示
              Container(
                  margin: const EdgeInsets.only(top: 10, left: 20, right: 20),
                  child: Text(
                    StringRes.women_cycle_tips,
                    textAlign: TextAlign.center,
                    style: ThemeUtil.p2.copyWith(
                        color: const Color(ThemeUtil.primaryWhiteValue50)),
                  )),

              //周期选择器
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Container(
                    margin: const EdgeInsets.only(top: 24),
                    height: 240,
                    width: 60,
                    child: ClickableListWheelScrollView(
                      scrollController: _scrollController,
                      itemHeight: _itemHeight,
                      itemCount: _items.length,
                      child: ListWheelScrollView.useDelegate(
                        controller: FixedExtentScrollController(
                            initialItem: _cycleValue),
                        itemExtent: _itemHeight,
                        physics: const FixedExtentScrollPhysics(),
                        overAndUnderCenterOpacity: 0.5,
                        perspective: 0.002,
                        onSelectedItemChanged: (index) {
                          _cycleValue = index;
                          _isNormalCycle.value = (index > 3 && index < 21);
                        },
                        childDelegate: ListWheelChildBuilderDelegate(
                          builder: (context, index) =>
                              ValueListenableBuilder<bool>(
                                  valueListenable: _isNormalCycle,
                                  builder: (context, value, child) {
                                    return Text(_items[index].toString(),
                                        textAlign: TextAlign.center,
                                        style: _isNormalCycle.value
                                            ? ThemeUtil.p1
                                            : ThemeUtil.p1.copyWith(
                                                color: const Color(ThemeUtil
                                                    .primaryYellowValue)));
                                  }),
                          childCount: _items.length,
                        ),
                      ),
                    ),
                  ),
                  ValueListenableBuilder<bool>(
                      valueListenable: _isNormalCycle,
                      builder: (context, value, child) {
                        return Text(StringRes.days,
                            textAlign: TextAlign.center,
                            style: _isNormalCycle.value
                                ? ThemeUtil.p1
                                : ThemeUtil.p1.copyWith(
                                    color: const Color(
                                        ThemeUtil.primaryYellowValue)));
                      }),
                ],
              ),
            ],
          ),
          bottom: Container(
            margin: EdgeInsets.only(bottom: 30 + MediaQuery.of(context).viewPadding.bottom, left: 30, right: 30),
            child: //下一步按钮
                Container(
              height: 50,
              alignment: Alignment.center,
              decoration: ThemeUtil.themeConStyle,
              child: TextButton(
                style: ThemeUtil.themebtnStyle,
                onPressed: () async {
                  DartLog.i(_tag, "保存本地的生理周期：${_items[_cycleValue]} 天");
                  EventBusUtil.getInstance().fire(DataEvent(
                      HealthDataType.REFRESH_SETTING_CYCLEVALUE,
                      _items[_cycleValue]));
                  Get.back();
                },
                child: Text(StringRes.confirm,
                    textAlign: TextAlign.center, style: ThemeUtil.p2),
              ),
            ),
          ),
        )
      ],
    );
  }
}
